<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
  </head>
  <body>
    <div id="area" class="any some area1"></div>
    <button id="change" data-target="#area">change</button>
    <div id="content" class="content"></div>
    <button id="move">move</button>
    <style>
      .content {
        width: 200px;
        height: 80px;
        background-color: rebeccapurple;
      }

      .any {
        border: solid 5px purple;
      }

      .area1 {
        width: 200px;
        height: 80px;
        background-color: brown;
      }

      .area2 {
        width: 40px;
        height: 30px;
        opacity: 0.5;
        background-color: green;
      }

      .area3 {
        width: 80px;
        height: 70px;
        opacity: 0.7;
        background-color: blueviolet;
      }
    </style>
    <!--  1-2 2-3 3-1 -->
    <script>
      // let c = document.querySelector("#change");
      // c.addEventListener("click", () => {
      //     let r = document.querySelector("#area");
      //     console.log(r.classList);
      //     console.log(r.classList.contains("anyone"))
      //     r.classList.remove("area1");
      //     r.classList.add("area2");
      //     // r.classList.toggle("area1")切换
      // })

      // console.log("------", c);
      // class ToggleRunner {
      //   elementNode;
      //   state = 1;
      //   r;
      //   constructor(node) {
      //     this.elementNode = node;
      //     this.state = 1;
      //     this.r = document.querySelector(node.dataset.target);
      //     this.elementNode.addEventListener("click", this.listen.bind(this));
      //     console.log("000", this.r, this.state, this.elementNode);
      //   }
      //   // go(){
      //   //   // c.addEventListener("click", this.listen);
      //   //   // console.log(this.r, this.state, this.elementNode);
      //   //   console.log(this);
      //   // }
      //   listen(event) {
      //     // let r = document.querySelector("#area");
      //     // let r =
      //     console.log("0000000", this);
      //     console.log(this.r, this.state, this.elementNode);
      //     if (this.state === 1) {
      //       this.state = 2;
      //       this.r.classList.remove("area1");
      //       this.r.classList.remove("area2");
      //       this.r.classList.remove("area3");
      //       this.r.classList.add("area2");
      //     } else if (this.state === 2) {
      //       this.state = 3;
      //       this.r.classList.remove("area1");
      //       this.r.classList.remove("area2");
      //       this.r.classList.remove("area3");
      //       this.r.classList.add("area3");
      //     } else if (this.state === 3) {
      //       this.state = 1;
      //       this.r.classList.remove("area1");
      //       this.r.classList.remove("area2");
      //       this.r.classList.remove("area3");
      //       this.r.classList.add("area1");
      //     }
      //   }
      // }
      // let bs = {
      //   ToggleRunner:ToggleRunner,
      //   age:10,
      // }
      // new bs.ToggleRunner(c)

      // let s =
      // new ToggleRunner(c);
      // s.go()
      // s.listen()
      // c.addEventListener("click", s.listen);
      (function () {
        let c = document.querySelector("#change");
        c.state = 1;
        c.addEventListener("click", () => {
          let r = document.querySelector("#area");
          if (c.state === 1) {
            c.state = 2;
            r.classList.remove("area1");
            r.classList.remove("area2");
            r.classList.remove("area3");
            r.classList.add("area2");
          } else if (c.state === 2) {
            c.state = 3;
            r.classList.remove("area1");
            r.classList.remove("area2");
            r.classList.remove("area3");
            r.classList.add("area3");
          } else if (c.state === 3) {
            c.state = 1;
            r.classList.remove("area1");
            r.classList.remove("area2");
            r.classList.remove("area3");
            r.classList.add("area1");
          }
        });
      })();

      document.querySelector("#move").addEventListener("click", () => {
        let content = document.querySelector("#content");
        // console.log(content);
        // style="transform:translateX(100px);background-color:red"
        content.style.transform = "translateX(100px)";
        content.style.backgroundColor = "red";
      });
    </script>
  </body>
</html>
